<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单信息</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap-table.min.css">
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="js/layui.min.js"></script>
    <link rel="stylesheet" href="css/layui.min.css"/>
    <link href="css/bootstrap-switch.min.css" rel="stylesheet">
    <script src="js/bootstrap-switch.min.js"></script>
</head>
<style>
    #search .input1 {
        width: 150px;
        margin-right: 15px;
    }
    #myModal .input1{
        width: 165px;
    }
</style>
<body>
<div class="container-fluid" id="app">
    <!--    工具栏-->
    <div id="toolbar">
        <div id="search">
            <form class="form-inline">
                <div class="form-group">
                    <label>订单编号</label>
                    <input id="order_code" type="text" class="form-control input1">
                </div>
                <div class="form-group">
                    <label>客户名称</label>
                    <input id="order_name" type="text" class="form-control input1">
                </div>
                <div class="form-group">
                    <label>订单状态</label>
                    <select id="order_status" class="form-control" style="margin-right: 15px">
                        <option hidden></option>
                        <option value="0">未付款</option>
                        <option value="1">已付款</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>订单时间</label>
                    <input id="start_time" style="width: 150px" type="date" class="form-control"> ~
                    <input id="end_time" style="width: 150px" type="date" class="form-control">
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-primary" onclick="search()" style="margin-left: 15px">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </button>
                    <button type="reset" class="btn btn-default" onclick="fresh()">
                        <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
                    </button>
                </div>
            </form>
        </div>

        <div class="btn-group">
            <button id="btn_detail" type="button" class="btn btn-info btn-sm">
                <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>查看明细
            </button>
            <button id="btn_delete" type="button" class="btn btn-danger btn-sm">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除订单
            </button>
        </div>
    </div>
<!--    model-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">订单明细</h4>
                </div>
                <div class="modal-body">
                    <form class="form-inline">
                        <input hidden id="order_id" type="text">
                        <div class="form-group">
                            <label>订单编号</label>
                            <input id="code" disabled type="text" class="form-control input1">
                        </div>
                        <div class="form-group" style="margin-left: 20px">
                            <label>客户名称</label>
                            <input id="name" disabled type="text" class="form-control input1">
                        </div>
                        <div class="form-group" style="margin-left: 20px">
                            <label>订单金额</label>
                            <input id="price" disabled type="text" class="form-control input1">
                        </div>
                        <br>
                        <div style="margin-top: 10px;margin-bottom: 10px">
                            <div class="form-group">
                                <label>订单状态</label>
                                <input id="status" disabled type="text" class="form-control input1">
                            </div>
                            <div class="form-group" style="margin-left: 20px">
                                <label>订单时间</label>
                                <input id="time" disabled type="text" class="form-control input1">
                            </div>
                        </div>
                    </form>
                    <!--    bootstrap-table-->
                    <table id="table2"></table>
                </div>
<!--                <div class="modal-footer">-->
<!--                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>-->
<!--                </div>-->
            </div>
        </div>
    </div>

    <!--    bootstrap-table-->
    <table id="table"></table>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            session:''
        }
    })
    //设置table属性
    $('#table').bootstrapTable({
        url: 'orderInfo/query',
        method: "get",
        pagination: true, //启动分页
        toolbar: '#toolbar',                //工具按钮用哪个容器
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        sortable: false,                     //是否启用排序
        sortOrder: "asc",                   //排序方式
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                       //初始化加载第一页，默认第一页
        pageSize: 5,                       //每页的记录行数（*）
        pageList: [2, 5, 10, 20, 50, 'All'],        //可供选择的每页的行数（*）
        smartDisplay: false,                 //智能显示关每页的行数
        search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
        strictSearch: false,
        showColumns: true,                  //是否显示所有的列
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        height: 710,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
        showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
        detailView: false,                   //是否显示父子表
        //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
        //设置为limit可以获取limit, offset, search, sort, order
        queryParamsType: "undefined",
        queryParams: function queryParams(params) {   //设置查询参数
            var param = {
                pageNumber: params.pageNumber,
                pageSize: params.pageSize,
                orderCode:$.trim($('#order_code').val()),
                orderName:$.trim($('#order_name').val()),
                orderStatus:$.trim($('#order_status').val()),
                startTime:$.trim($('#start_time').val()),
                endTime:$.trim($('#end_time').val()),
            };
            return param;
        },
        onLoadSuccess: function () {  //加载成功时执行
            //复选框水平垂直居中显示
            $(".bs-checkbox").css({'text-align': 'center', 'vertical-align': 'middle'})
        },
        onLoadError: function () {  //加载失败时执行
            // layer.msg("加载数据失败", {time : 1500, icon : 2});
            // alert("加载数据失败")
        },
        //设置列属性
        columns: [{
            checkbox: true,
            visible: true,
        }, {
            title: '序号',
            width: 40,
            align: "center",
            valign: 'middle',
            formatter: function (value, row, index) {
                var pageSize = $('#table').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                var pageNumber = $('#table').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                return pageSize * (pageNumber - 1) + index + 1;    //返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
            }
        }, {
            field: 'id',
            title: 'id',
            align: "center",
            valign: 'middle',
        }, {
            field: 'orderCode',
            title: '订单编号',
            align: "center",
            valign: 'middle',
        }, {
            field: 'pdName',
            title: '订单客户',
            align: "center",
            valign: 'middle',
            formatter: function (value, row, index) {
                return row.userInfo.userName
            }
        }, {
            field: 'orderPrice',
            title: '订单金额',
            align: "center",
            valign: 'middle',
        }, {
            field: 'status',
            title: '订单状态',
            align: "center",
            valign: 'middle',
            formatter: function (value, row, index) {
                if (row.status == '1') {
                    value = '已付款'
                } else {
                    value = '未付款'
                }
                return value
            }
        }, {
            field: 'createTime',
            title: '订单时间',
            align: "center",
            valign: 'middle',
        }]
    })

    function detailTable() {
        $('#table2').bootstrapTable({
            url: 'orderDetail/queryDetail',
            method: "get",
            pagination: false, //启动分页
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            // height: 710,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            queryParamsType: "undefined",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    oid: $.trim($('#order_id').val()),
                };
                return param;
            },
            onLoadSuccess: function () {  //加载成功时执行
                //复选框水平垂直居中显示
                $(".bs-checkbox").css({'text-align': 'center', 'vertical-align': 'middle'})
            },
            onLoadError: function () {  //加载失败时执行
                // layer.msg("加载数据失败", {time : 1500, icon : 2});
                // alert("加载数据失败")
            },
            //设置列属性
            columns: [{
                title: '序号',
                width: 40,
                align: "center",
                valign: 'middle',
                formatter: function (value, row, index) {
                    var pageSize = $('#table').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                    var pageNumber = $('#table').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                    return pageSize * (pageNumber - 1) + index + 1;    //返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                }
            }, {
                field: 'pid',
                title: '商品名称',
                align: "center",
                valign: 'middle',
                formatter: function (value, row, index) {
                    return row.productInfo.pdName
                }
            }, {
                field: 'num',
                title: '单价',
                align: "center",
                valign: 'middle',
                formatter: function (value, row, index) {
                    return row.productInfo.price
                }
            }, {
                field: 'num',
                title: '数量',
                align: "center",
                valign: 'middle',
            }, {
                field: 'total',
                title: '小计',
                align: "center",
                valign: 'middle',
                formatter: function (value, row, index) {
                    return row.productInfo.price*row.num
                }
            }]
        })
    }
    //获取选择的数据删除操作
    $("#btn_delete").click(function () {
        var selectData = $("#table").bootstrapTable('getSelections')
        if (selectData != null && selectData.length > 0) {
            var index = layer.confirm('是否删除改记录？', {
                offset: '100px',
                title: '删除提示',
                icon: 3,
                btn: ['取消', '删除',] //可以无限个按钮
            }, function () {
                layer.close(index)
            }, function () {
                axios.delete('orderInfo/delete/' + selectData[0].id).then((response) => {
                    $("#table").bootstrapTable('refresh');
                    layer.msg('删除成功', {offset: '100px', icon: 1});
                })
                selectData = null
            });
        } else {
            layer.msg('当前无选择记录', {offset: '100px', icon: 2});
        }
    })

    //获取订单明细
    $("#btn_detail").click(function () {
        var selectData = $("#table").bootstrapTable('getSelections')
        if (selectData != null && selectData.length > 0) {
            $('#myModal').modal('show')
            axios.get('orderInfo/selectOne/' + selectData[0].id).then((response) => {
                if (response.data.code=="1"){
                    $('#order_id').val(response.data.data.id)
                    $('#code').val(response.data.data.orderCode)
                    $('#name').val(response.data.data.userInfo.userName)
                    if (response.data.data.status=="1"){
                        $('#status').val("已付款")
                    }else {
                        $('#status').val("未付款")
                    }
                    $('#price').val(response.data.data.orderPrice)
                    $('#time').val(response.data.data.createTime)
                }
            })
            detailTable()
            setTimeout('$("#table2").bootstrapTable("refresh")',100)
        } else {
            layer.msg('当前无选择记录', {offset: '100px', icon: 2});
        }
    })
    //搜索
    function search() {
        $("#table").bootstrapTable("refresh")
    }
    //重置
    function fresh() {
        setTimeout('$("#table").bootstrapTable("refresh")',100)
    }
</script>
</html>